<template>
    <div>
        <section class="header text-center">
            <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
                <div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
                        <ul class="navbar-nav mt-2 mt-md-0">
                            <li class="nav-item active"><a class="nav-link" href="#">{{$t('m.Home')}} <span class="sr-only">(current)</span></a></li>
                            <li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.Shop')}} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <div class="container">
                                        <div class="divider"></div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Women's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Men's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Girl's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">Boy's</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-4">
                                                <h6 class="text-uppercase">Featured Items</h6>
                                                <div class="row">
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">Product Name</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
                                            </div>
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">Product Name</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
                                            </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.Pages')}} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.HomePages')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="catalog.html">{{$t('m.Catalog')}}</a>
                                    <a class="dropdown-item" href="item.html">{{$t('m.Item_Detail')}}</a>
                                    <a class="dropdown-item" href="cart.html">{{$t('m.Cart')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="contact.html">{{$t('m.Contact')}}</a>
                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.Contact')}}</a></li>
                        <li class="nav-item dropdown">
                            <!-- 检索功能 -->
                            <!-- <Search @search="search" v-model="value">
                            </Search> -->
                            <AutoComplete
                                :option="params"
                                v-model="value"
                                @change="onChange"
                                @search="search"
                                type="title"
                                placeholder="搜索商品"
                                :mustMatch="false"
                                
                            ></AutoComplete>
                        </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" target="_blank"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">{{totalcount}}</span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
                                    <h6>{{totalcount}} <span class="emphasis">共计：{{totalprice}}</span></h6>
                                    <div class="dropdown-divider"></div>
                                    <ul class="shopping-cart-items">
                                        <li class="row" v-for="(item, index) in cartlist" :key="index">
                                            <div class="col-3">
                                                <img :src=item.pic width="60">
                                            </div>
                                            <div class="col-9">
                                                <h6><a href="item.html">{{item.name}}</a></h6>
                                                <span class="text-muted">数量：{{item.num}}</span>
                                                <span class="emphasis">单价：{{item.price}}</span></div>
                                        </li>
                                    </ul>
                                    
                                    <a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
                            </li>
                        </ul>
                    </div>
                    <div v-if="username==''">
                        <router-link to="/reg">注册</router-link>/
                        <router-link to="/login">登录</router-link>
                    </div>
                    <div v-else>
                        欢迎您，<router-link to="/myprofile">{{username}}</router-link>
                        &nbsp;&nbsp;&nbsp;
                        <a href="#" @click="logout">登出</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="/addgoods">添加商品</a>
                    </div>
                </div>
                <div>
                    <div v-width='300'>切换语言
                            <Select v-model="select" :datas="lang_list" autosize width='30'  @change="changeLangEvent(select)"></Select>
                    </div>
                    <!-- 国际化语言开关 -->
                    <h-switch v-model="lang" @change='langchange'>中/英</h-switch>
                </div>
            </nav>
        </section>
    </div>
</template>


<script>
    import jsonp from 'fetch-jsonp';
    const loadData = function(filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
    jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
        .then(response => response.json())
        .then(d => {
        callback(
            d.result.map(r => {
            return r[0];
            })
        );
        });
};
export default {
    name:'myheader',
    data() {
        return {
            username:'',
            lang_list:[{ title: '中文', key: 'zh'}, { title: '英文', key: 'en' }, { title: '法文', key: 'fr' }],
            select:'zh',
            //语言变量
            lang:false,
            cartlist:[],
            value:'',
            params: {
                orgId: 1, // 自定义参数传递
                loadData,
                minWord: 1
            },
        }
    },
    //定义接受参数
    props:['totalcount','totalprice'],
    mounted() {
        //获取购物车
        this.get_cart_list()
        //自动判断语言
        // console.log(navigator.language)
        if (navigator.language == 'zh-CN') {
            this.$i18n.locale=='zh'
            this.lang = 0
        }else{
            this.$i18n.locale=='en'
            this.lang = 1
        }
        
        //钉钉登录
        var ding_id = this.$route.query.ding_id;
        var uid = this.$route.query.uid;
        var jwt = this.$route.query.jwt;

        if (ding_id) {
            //自动登录
            localStorage.setItem("username",ding_id)
            localStorage.setItem("uid",uid)
            localStorage.setItem("jwt",jwt)
        };
        
        //微博登录，接收参数
		var sina_id = this.$route.query.sina_id;
        var uid = this.$route.query.uid;
        var jwt = this.$route.query.jwt;

        if (sina_id) {
            //自动登录
            localStorage.setItem("username",sina_id)
            localStorage.setItem("uid",uid)
            localStorage.setItem("jwt",jwt)
        }

        //判断用户是否登录
        let uname = localStorage.getItem("username");
        if (uname == null ) {
            //说明未登录或已登出
            this.username = ''
        }else{
            this.username = uname
        }

    },
    methods: {
        //获取购物车
        get_cart_list(){
            if (localStorage.getItem("cart")) {
                this.cartlist = JSON.parse(localStorage.getItem("cart"))
                console.log(this.cartlist[1].pic)
            }
            else{
                this.cartlist = []
            }
        },
        // 检索逻辑
        search(){
            if (this.value) {
                this.$router.push({'path':'/search',query:{word:this.value}})
            }
            else{
                this.$Message('请输入商品名称 ')
            }
        },
        onChange(data, trigger) {
            if (this.value) {
                this.$router.push({
                path: "/search",
                query: { word: this.value }
                });
            } else {
                this.$Message("请输入商品名称");
            }
        },
        //语言切换事件
        langchange(){
            // console.log(this.lang);
            if (this.lang == true) {
                this.$i18n.locale = 'en';
                localStorage.setItem("lang",'en')
            }else{
                this.$i18n.locale = 'zh';
                localStorage.setItem("lang",'zh')
            }
        },
        logout(){
            //删除对应的localstorge的项   clear（）全删掉！
            localStorage.removeItem("username")
            this.username = '';
            this.$router.push('/login');
        },
        changeLangEvent(key) {
            // console.log(key);
                if ( key === 'zh' ) {
                    this.$i18n.locale = 'zh';//关键语句
                    // console.log('cn')
                }else if(key === 'en') {
                    this.$i18n.locale = 'en';//关键语句
                    // console.log('en')
                }else if (key == 'fr'){
                    this.$i18n.locale = 'fr';//关键语句
                    // console.log('fr')
                }
        },
    },
}
</script>

<style>

</style>